

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 客单量TOP5</span>
      </div>
      <div style="margin-top: 40px">
        <div class="top" ref="top" style="width: 100%; height: 180px"></div>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'

let charts = null
export default {
   mounted() {
     charts = echarts.init(this.$refs.top)
     this.setOptions()
   },
  methods:{
    setOptions(){

     let data = [{
        name: '浔南社区食堂',
        value: 26309,
      },
        {
          name: '辽里食堂',
          value:21518,

        },
        {
          name: '东迁食堂',
          value: 12100,

        },
        {
          name: '石淙食堂',
          value: 8987,

        },
       {
         name: '双林镇南食堂',
         value: 4263,

       },

      ];
      function getArrByKey(data, k)  {
        let key = k || "value";
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      };

      data = data.sort((a,b) => {
        return b.value - a.value
      });
      const option = {
        grid: {
          top: '2%',
          bottom: 10,
          right: 70,
          left: 150,

        },
        xAxis: {
          show: false
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin:120,
            textStyle: {
              align:'left',
              fontSize: 14,
              fontWeight: 'bold',
              color: 'rgba(79, 166, 247, 1)'
            },
          },
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },

          axisLabel: {
            textStyle: {
              fontSize: 16,
              fontWeight: 'bold',
              color: '#ffffff'
            },
            formatter: function (value, index) {
              return  data[index].value
            }
          },
        }],
        series: [{
          name: '',
          type: 'bar',
          yAxisIndex: 0,
          data: data,
          barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
                  offset: 0,
                  color: 'rgba(21, 25, 82,0.3 )'
                },{
                  offset:0.8,
                  color: 'rgba(228, 196, 49, 0.8)'
                }
                ], false),

              }
            },

        }]
      };
      charts.setOption(option)
    }
  }
};

</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 240px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
